<template>
  <div id="mymap" style="width: 100%; height: 400px"></div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref, watch } from "vue";
import * as echarts from "echarts";
import china from "../../../data/china.json";
echarts.registerMap("china", china as any);

const props = defineProps<{
  data: {}[];
}>();
let myMap: echarts.ECharts;
watch(
  () => props.data,
  () => {
    const data = props.data.map((item: { [key: string]: string | number }) => {
      return {
        name: item.areaName,
        value: item.saleNum,
      };
    });
    console.log(data);

    if (!myMap) {
      myMap = echarts.init(document.getElementById("mymap") as HTMLElement);
      const option = {
        tooltip: {
          show: true,
          formatter: "{b0} <br /> 销量：{c0}",
          backgroundColor: "rgba(50,50,50,0.7)",
          textStyle: {
            color: "#fff",
          },
        },
        series: {
          type: "map",
          map: "china",
          zoom: 1.3,
          layoutCenter: ["50%", "50%"],
          emphasis: {
            label: {
              show: false,
            },
            itemStyle: {
              areaColor: "red",
            },
          },
          itemStyle: {
            borderColor: "#fff",
          },
          data,
        },
        visualMap: {
          type: "continuous",
          min: 0,
          max: 1000000,
          bottom: 0,
          calculable: true,
          inRange: {
            color: ["#fff", "rgba(255,0,0,0.3)", "rgba(255,0,0,0.7)", "red"],
          },
        },
      };
      myMap.setOption(option);
    }
  }
);
</script>
<style lang="less" scoped></style>
